import 'package:ac/common/style.dart';
import 'package:ac/data/ac_user_manager.dart';
import 'package:ac/route/ac_route_pages.dart';
import 'package:ac/widget/ac_gift_mixin.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'ac_post_detail_logic.dart';

class AcPostDetailPage extends StatefulWidget {
  @override
  State<AcPostDetailPage> createState() => _AcPostDetailPageState();
}

class _AcPostDetailPageState extends State<AcPostDetailPage> with AcGiftMixin {
  final logic = Get.find<AcPostDetailLogic>();

  final state = Get.find<AcPostDetailLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Listener(
            onPointerUp: (event) {
              FocusScope.of(context).unfocus();
            },
            child: ListView(
              padding: EdgeInsets.zero,
              children: [
                SizedBox(
                  height: 359.h,
                  width: 375.w,
                  child: Stack(
                    children: [
                      PageView(
                        onPageChanged: (index) {
                          state.index.value = index;
                        },
                        children: [
                              state.post.value!.mainImage,
                              ...state.post.value!.images
                            ]
                                .map(
                                  (e) => Image.asset(
                                    e,
                                    fit: BoxFit.cover,
                                  ),
                                )
                                .toList() ??
                            [],
                      ),
                      Positioned(
                        bottom: 0,
                        left: 0,
                        right: 0,
                        child: Container(
                          height: 84.h,
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                              colors: [
                                Colors.transparent,
                                Colors.white.withOpacity(0.1),
                                Colors.white.withOpacity(0.2),
                                Colors.white.withOpacity(0.3),
                                Colors.white.withOpacity(0.4),
                                Colors.white.withOpacity(0.6),
                              ],
                              begin: Alignment.topCenter,
                              end: Alignment.bottomCenter,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                _info(),
                SizedBox(height: 8.h),
                _comment(),
              ],
            ),
          ),
          _title(),
          Positioned(
            bottom: 0,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.1),
                    offset: const Offset(0, -3),
                    blurRadius: 6.w,
                    spreadRadius: 0,
                  ),
                ],
              ),
              child: SafeArea(
                top: false,
                child: Container(
                  height: 64.h,
                  width: 375.w,
                  alignment: Alignment.center,
                  padding: EdgeInsets.only(
                    left: 20.w,
                    right: 20.w,
                  ),
                  child: Row(
                    children: [
                      Container(
                        height: 36.h,
                        width: 248.w,
                        decoration: BoxDecoration(
                          color: const Color(0xfff2f2f2),
                          borderRadius: BorderRadius.circular(50.r),
                        ),
                        child: TextField(
                          controller: state.commentController,
                          decoration: InputDecoration(
                            hintText: "Enter your ideas...",
                            hintStyle: TextStyle(
                              fontSize: 14.sp,
                              color: textColorBlack.withOpacity(0.3),
                            ),
                            contentPadding: EdgeInsets.only(
                              left: 20.w,
                              right: 20.w,
                              top: 12.h,
                              bottom: 12.h,
                            ),
                            border: InputBorder.none,
                          ),
                        ),
                      ),
                      const Spacer(),
                      GestureDetector(
                        onTap: logic.sendComment,
                        child: Container(
                          height: 32.h,
                          width: 63.w,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(50.r),
                            gradient: const LinearGradient(
                              colors: [
                                Color(0xFFFFC371),
                                Color(0xFFFF5F6D),
                              ],
                              begin: Alignment.centerLeft,
                              end: Alignment.centerRight,
                            ),
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            "Send",
                            style: TextStyle(
                              fontSize: 16.sp,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Container _info() {
    return Container(
      padding: EdgeInsets.symmetric(
        horizontal: 20.w,
        vertical: 20.h,
      ),
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Expanded(
                child: GestureDetector(
                  onTap: () {
                    Get.toNamed(AcRouteNames.userDetail,
                        arguments: state.userInfo.value?.userId,
                        parameters: {"from": "post_detail"});
                  },
                  child: Row(
                    children: [
                      ClipOval(
                        child: CachedNetworkImage(
                          imageUrl: state.userInfo.value?.avatar ?? "",
                          width: 36.w,
                          height: 36.w,
                        ),
                      ),
                      SizedBox(width: 8.w),
                      Expanded(
                        child: Text(
                          (state.userInfo.value?.nickname ?? "").fixAutoLines(),
                          maxLines: 1,
                          style: TextStyle(
                            fontSize: 15.sp,
                            color: textColorBlack,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              SizedBox(width: 12.w),
              Visibility(
                visible: !logic.state.isMyPost,
                child: GestureDetector(
                  onTap: logic.chat,
                  child: Row(
                    children: [
                      Image.asset(
                        "images/icon_message_yes.png",
                        width: 16.w,
                        height: 16.w,
                      ),
                      SizedBox(width: 4.w),
                      Text(
                        "Chat",
                        style: TextStyle(
                          fontSize: 12.sp,
                          color: textColorBlack.withOpacity(0.5),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ],
          ),
          Text(
            state.post.value?.title ?? "",
            style: TextStyle(
              fontSize: 14.sp,
              fontWeight: FontWeight.w500,
              color: const Color(0xff202020),
            ),
          ),
          SizedBox(
            height: 12.h,
          ),
          Text(
            state.post.value?.content ?? "",
            style: TextStyle(
              fontSize: 11.sp,
              fontWeight: FontWeight.w400,
              color: textColorBlack,
            ),
          ),
          SizedBox(height: 25.h),
          Row(
            children: [
              Obx(() {
                return Visibility(
                  visible: state.translationContent.value.isEmpty,
                  child: GestureDetector(
                    onTap: logic.translate,
                    child: Container(
                      decoration: BoxDecoration(
                        color: const Color(0xffFFFAEA),
                        borderRadius: BorderRadius.circular(4.r),
                      ),
                      padding:
                          EdgeInsets.symmetric(horizontal: 7.w, vertical: 3.h),
                      child: Text(
                        "Translate",
                        style: TextStyle(
                          color: const Color(0xffFFC371),
                          fontSize: 11.sp,
                        ),
                      ),
                    ),
                  ),
                );
              }),
              const Spacer(),
              GestureDetector(
                onTap: logic.like,
                child: Row(
                  children: [
                    Obx(() {
                      var isLiked = logic.state.post.value?.isLiked;
                      return Image.asset(
                        "images/icon_home_${isLiked == true ? "yes" : "no"}.png",
                        width: 16.w,
                        height: 16.w,
                      );
                    }),
                    SizedBox(width: 4.w),
                    Text(
                      "Like",
                      style: TextStyle(
                        fontSize: 12.sp,
                        color: Colors.black.withOpacity(0.5),
                      ),
                    )
                  ],
                ),
              ),
              SizedBox(width: 24.w),
              Visibility(
                visible: !logic.state.isMyPost,
                child: GestureDetector(
                  onTap: showRewardDialog,
                  child: Row(
                    children: [
                      Image.asset(
                        "images/icon_gift.png",
                        width: 16.w,
                        height: 16.w,
                      ),
                      SizedBox(width: 4.w),
                      Text(
                        "Gift",
                        style: TextStyle(
                          fontSize: 12.sp,
                          color: Colors.black.withOpacity(0.5),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ],
          ),
          Obx(() {
            if (state.translationContent.value.isEmpty) {
              return Container();
            }
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 0.5.h,
                  margin: EdgeInsets.symmetric(vertical: 15.h),
                  decoration: const BoxDecoration(
                    color: Color(0xffF2F2F2),
                  ),
                ),
                Text(
                  state.translationContent.value,
                  style: TextStyle(
                    fontSize: 11.sp,
                    fontWeight: FontWeight.w400,
                    color: textColorBlack,
                  ),
                )
              ],
            );
          })
        ],
      ),
    );
  }

  Positioned _title() {
    var imageList = [state.post.value!.mainImage, ...state.post.value!.images];
    return Positioned(
      top: ScreenUtil().statusBarHeight,
      child: SizedBox(
        height: 44.h,
        width: 375.w,
        child: Stack(
          children: [
            Align(
              alignment: Alignment.center,
              child: Obx(() {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: imageList
                          .map(
                            (e) => Container(
                              height: 5.h,
                              margin: EdgeInsets.only(
                                  right: imageList.indexOf(e) ==
                                          (state.post.value?.images.length ??
                                              0 - 1)
                                      ? 0
                                      : 4.w),
                              width: imageList.indexOf(e) == state.index.value
                                  ? 22.w
                                  : 12.w,
                              decoration: BoxDecoration(
                                color: imageList.indexOf(e) != state.index.value
                                    ? Colors.white
                                    : null,
                                borderRadius: BorderRadius.circular(1.r),
                                gradient:
                                    imageList.indexOf(e) == state.index.value
                                        ? const LinearGradient(
                                            colors: [
                                              Color(0xFFFFF78A),
                                              Color(0xFFFF9900)
                                            ],
                                            begin: Alignment.centerLeft,
                                            end: Alignment.centerRight,
                                          )
                                        : null,
                              ),
                            ),
                          )
                          .toList() ??
                      [],
                );
              }),
            ),
            Positioned(
              left: 20.w,
              top: 0,
              bottom: 0,
              child: GestureDetector(
                onTap: () {
                  Get.back();
                },
                child: Image.asset(
                  "images/back.png",
                  width: 20.w,
                  height: 16.h,
                ),
              ),
            ),
            Positioned(
              right: 20.w,
              top: 0,
              bottom: 0,
              child: Visibility(
                visible: !logic.state.isMyPost,
                child: GestureDetector(
                  onTap: logic.more,
                  child: Image.asset(
                    "images/icon_more.png",
                    width: 28.w,
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _comment() {
    return Obx(() {
      if (state.post.value?.comment.isEmpty ?? true) {
        return Container(
          height: 100.h,
          width: 375.w,
          color: Colors.white,
          child: Center(
            child: Text(
              "No comments yet",
              style: TextStyle(
                fontSize: 14.sp,
                color: textColorBlack.withOpacity(0.5),
              ),
            ),
          ),
        );
      }
      return Container(
        color: Colors.white,
        padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 16.h),
        margin: EdgeInsets.only(bottom: 84.h),
        child: Column(
          children: state.post.value?.comment
                  .map(
                    (e) => Container(
                      padding: EdgeInsets.symmetric(
                          horizontal: 12.w, vertical: 16.h),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(16.r),
                        color: const Color(0xfff8f8f8),
                      ),
                      margin: EdgeInsets.only(bottom: 12.h),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              ClipOval(
                                child: CachedNetworkImage(
                                  imageUrl: AcUserManager.userInfoModel
                                          ?.userInfo.avatarThumbUrl ??
                                      "",
                                  width: 38.w,
                                  height: 38.w,
                                ),
                              ),
                              SizedBox(width: 10.w),
                              Text(
                                AcUserManager
                                        .userInfoModel?.userInfo.nickname ??
                                    "",
                                style: TextStyle(
                                  fontSize: 14.sp,
                                  color: textColorBlack,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                            ],
                          ),
                          SizedBox(height: 12.h),
                          Text(
                            e.fixAutoLines(),
                            maxLines: 2,
                            style: TextStyle(
                              fontSize: 12.sp,
                              color: textColorBlack,
                              fontWeight: FontWeight.w400,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ],
                      ),
                    ),
                  )
                  .toList() ??
              [],
        ),
      );
    });
  }
}
